<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>table模块快速使用</title>
	<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-row">
	<form class="layui-form layui-col-md12 we-search" style="margin-top: 10px" lay-filter="search">
		管理员搜索：
		<div class="layui-inline">
			<input type="text" id="name" name="name" placeholder="请输入关键字" autocomplete="off" class="layui-input">
		</div>
		<button class="layui-btn"  lay-filter="search" lay-submit=""><i class="layui-icon">&#xe615;</i></button>
	</form>

</div>

<table id="demo" lay-filter="test">

</table>
<!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--工具转换-->
<script type="text/html" id="sex">
	{{#if (d.sex == 1) { }}
	<span>男</span>
	{{# }else if(d.sex == 2){ }}
	<span>女</span>
	{{# } }}
</script>

<script type="text/html" id="roleid">
	{{#if (d.roleid == 1) { }}
	<span>超级管理员</span>
	{{# }else if(d.roleid == 2){ }}
	<span>社团管理员</span>
	{{# }else if(d.roleid == 3){ }}
	<span>普通学生</span>
	{{# } }}
</script>


<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="../../layui/layui.js"></script>
<script>
    layui.use(['table','form','jquery'],function(){
        var table = layui.table;
        var form = layui.form;
        //第一个实例
        table.render({
            elem: '#demo'
            ,id:"test"
            ,height: 'full'
            ,url: '/api/admin/getAccountList' //数据接口
            ,page: true //开启分页
            ,parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data//解析数据列表
                };
            }
            ,request: {
                pageName: 'current' //页码的参数名称，默认：page
                ,limitName: 'size' //每页数据量的参数名，默认：limit
            }
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'createTime', title: '创建时间', align:'center',width:180}
                ,{field: 'modifyTime', title: '更新时间',align:'center', width:180, sort: true}
                ,{field: 'account', title: '账号名',align:'center', width:165}
                ,{field: 'email', title: '邮箱', align:'center',width: 180}
                ,{field: 'phone', title: '手机',align:'center', width: 180, sort: true}
                ,{field: 'sex',title:'性别', width: 165, align:'center', toolbar: '#sex'}
                ,{field: 'roleid',title:'权限',width: 165, align:'center', toolbar: '#roleid'}
                ,{title:'操作',fixed: 'right', fixed: 'right',width: 165, align:'center', toolbar: '#barDemo'}

            ]]
        });
        form.on('submit(search)', function(data){
            //alert(1);
            var f = data.field;
            console.log(data)
            table.render({
                elem: '#demo'
                ,id:"test"
                ,height: 'full'
                ,url: '/api/admin/getAccountListByName?name='+f.name //数据接口
                ,page: false //开启分页
                ,request: {
                    pageName: 'current' //页码的参数名称，默认：page
                    ,limitName: 'size' //每页数据量的参数名，默认：limit
                }
                ,parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.data//解析数据列表
                    };
                }
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'createTime', title: '创建时间', align:'center',width:180}
                    ,{field: 'modifyTime', title: '更新时间',align:'center', width:180, sort: true}
                    ,{field: 'account', title: '账号名',align:'center', width:80}
                    ,{field: 'email', title: '邮箱', align:'center',width: 180}
                    ,{field: 'phone', title: '手机',align:'center', width: 180, sort: true}
                    ,{field: 'sex',title:'性别', width: 165, align:'center', toolbar: '#sex'}
                    ,{field: 'roleid',title:'权限', fixed: 'right',width: 165, align:'center', toolbar: '#roleid'}
                ]]
            });
            return false;
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                console.log(data.id);
                //layer.msg(data);
                //layer.msg('查看操作');
            } else if(layEvent === 'del'){
                var index = parent.layer.getFrameIndex(window.name);
                layer.confirm("确定删除",function (index) {
                    $.ajax({
                        type:"get",
                        url:"/api/admin/deleteAccount?id="+data.id,
                        success: function(res){
                            if (res.code == 0 || res.msg =="成功"){
                                layer.msg("删除成功");
                                obj.del();
                                //layer.close(index);
                            }else{
                                layer.msg("删除失败");
                            }
                        }
                    });
                })
            } else if(layEvent === 'edit'){
                layer.open({
                    type: 2,
                    content: ['./edit.html?id='+data.id,'no'],
                    title: ['管理员资料编辑'],
                    area:['500px','400px'],
                    success: function (layero, index) {
                        // 获取子页面的iframe
                        var iframe = window['layui-layer-iframe' + index];
                        // 向子页面的全局函数child传参
                        iframe.child(data);
                    },
                    end:function () {
                        $(".layui-laypage-btn").click();
                    }
                });
                layer.msg('编辑操作');
            }
        });

        // svar temp = table.checkStatus('test');
        // alert(temp.data);
    });
</script>
</body>
</html>